<template>
  <div class="app-container">
    <div class="app-title">
      <span>维护人事信息</span>
    </div>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-col :span="1">
          <i :class="[treeShow ? 'el-icon-s-fold treeI' : 'el-icon-s-unfold treeI']" @click="toggerTree" />
        </el-col>
        <div class="tap-fillet">
          <el-radio-group v-model="activeName" style="margin-left:4rem; width:700px; height:15px; margin-top:-65px">
            <el-radio-button label="all" name="didNotReport"><img style=" height:12px;" :src="allimgSrc">全部
            </el-radio-button>
            <!--            <el-radio-button-->
            <!--              label="0"-->
            <!--              name="report"-->
            <!--            >未生效</el-radio-button>-->
            <el-radio-button label="2" name="didNotReport"><img style=" height:12px;" :src="Processedimg">变动人员
            </el-radio-button>
          </el-radio-group>
        </div>
      </el-col>

      <div class="filter-container">
        <div>
          <el-col style="text-align:right;margin-top: -3px" :span="16">
            <el-button size="small" class="filter-item" style="margin-left: 10px;" type="primary" @click="Query">
              查询
            </el-button>
            <el-button v-if="activeName !== '2'" size="small" class="filter-item" style="margin-left: 10px;"
              type="primary" @click="handleEdit">
              修改
            </el-button>
            <el-button v-if="activeName == '0' || activeName == 'all'" size="small" class="filter-item"
              style="margin-left: 10px;" type="primary" @click="handleAdd">
              新增
            </el-button>
            <el-button v-if="activeName == 'all'" size="small" class="filter-item" style="margin-left: 10px;"
              type="primary" @click="handleOut">
              调出
            </el-button>
            <el-button v-if="activeName == 'all'" size="small" class="filter-item" style="margin-left: 10px;"
              type="primary" :loading="inLoading" @click="handleIn">
              调入
            </el-button>
            <el-button v-if="activeName === 'all'" size="small" class="filter-item" style="margin-left: 10px;"
              type="primary" @click="handleReduction">
              消减
            </el-button>

            <!-- <el-button
              v-if="activeName == 'all'"
              size="small"
              class="filter-item"
              style="margin-left: 10px;"
              type="primary"
              @click="exportTemplate"
            >
              模板导出
            </el-button> -->
            <el-button v-if="activeName == 'all'" size="small" class="filter-item" style="margin-left: 10px;width:120px"
              type="primary" @click="outPutFile">
              卡号模板导出
            </el-button>
            <el-button v-if="activeName == 'all'" size="small" class="filter-item" style="margin-left: 10px;"
              type="primary" @click="importFile">
              卡号导入
            </el-button>

            <!--            <el-button-->
            <!--              v-if="activeName=='0'"-->
            <!--              size="small"-->
            <!--              class="filter-item"-->
            <!--              style="margin-left: 10px;"-->
            <!--              type="primary"-->
            <!--              :loading="verifyLoading"-->
            <!--              @click="submitVerify"-->
            <!--            >-->
            <!--              生效-->
            <!--            </el-button>-->

            <!--            <el-button-->
            <!--              v-if="activeName === '0'"-->
            <!--              size="small"-->
            <!--              class="filter-item"-->
            <!--              style="margin-left: 10px;"-->
            <!--              type="primary"-->
            <!--              :loading="deleteLoading"-->
            <!--              @click="handleDelete"-->
            <!--            >-->
            <!--              撤销变动-->
            <!--            </el-button>-->
            <el-button v-if="activeName == '2'" size="small" class="filter-item" style="margin-left: 10px;"
              type="primary" :loading="revokeVerifyLoading" @click="revokeVerify">
              撤销生效
            </el-button>
            <el-button size="small" class="filter-item" style="margin-left: 10px;" type="primary" @click="appendixOpen">
              附件管理
            </el-button>
          </el-col>
        </div>
      </div>
    </el-row>
    <div ref="box" class="box">
      <div class="left" :class="[isActive ? 'wid' : 'wids']">
        <div :class="[treeShow ? 'treeShow' : 'treeNotShow']" :style="{ 'height': treeHeight + 'px' }">
          <AgencyTree class="agencyTree" @handleTreeQuery="handleTreeQuery"
            @getFirstAuthAgencyData="getFirstAuthAgencyData" />
        </div>
      </div>
      <div v-show="Show" class="resize" title="收缩侧边栏" />
      <div class="mid" :class="[isActive ? 'mids' : 'min']">
        <personChangeEditNoAuditChildrenTable :key="timer" ref="chil" :tab-pane="activeName" :tree-data="treeData" :organization="organization"
          @handleDeleteCallback="handleDeleteCallback" @handleInCallback="handleInCallback"
          @revokeVerifyCallback="revokeVerifyCallback" @verifyCallback="verifyCallback"
          @salaryStateCallback="salaryStateCallback" />
      </div>
      <Drag ref="icon" />
    </div>
  </div>
</template>

<script>
import personChangeEditNoAuditChildrenTable from '@/views/personInfoMaintenance/children/personChangeEditNoAuditChildren'
import AgencyTree from '@/components/tree/agencyTree'
import Drag from '@/components/Drag'
export default {
  name: 'ComplexTable',
  components: { Drag, AgencyTree, personChangeEditNoAuditChildrenTable },
  data() {
    return {
      organization :'3',
      allimgSrc: require('@/assets/images/whiteall.png'),
      Untreatedimg: require('@/assets/images/blueselect.png'),
      Processedimg: require('@/assets/images/processed.png'),
      timer: '',
      activeName: 'all',
      revokeVerifyLoading: false,
      inLoading: false, // 调入
      verifyLoading: false, // 送审
      deleteLoading: false, // 删除
      treeShow: false,
      isActive: true,
      treeHeight: null,
      Show: false,
      treeData: ''
    }
  },
  watch: {
    activeName(val) {
      this.timer = new Date().getTime()
      if (val === 'all') {
        this.allimgSrc = require('@/assets/images/whiteall.png')
        this.Processedimg = require('@/assets/images/processed.png')
        this.Untreatedimg = require('@/assets/images/blueselect.png')
      } else if (val === '0') {
        this.allimgSrc = require('@/assets/images/all.svg')
        this.Processedimg = require('@/assets/images/processed.png')
        this.Untreatedimg = require('@/assets/images/select.png')
      } else if (val === '2') {
        this.allimgSrc = require('@/assets/images/all.png')
        this.Processedimg = require('@/assets/images/blue.png')
        this.Untreatedimg = require('@/assets/images/blueselect.png')
      }
    }
  },
  created() { },
  mounted() {
    this.dragController()
    this.getTeHeight()
  },
  beforeMount() {
    window.addEventListener('resize', this.getTeHeight)
  },
  methods: {
    getFirstAuthAgencyData(data) {
      this.treeData = data
    },
    getTeHeight() {
      this.treeHeight = window.innerHeight - 250
    },
    // 查询
    Query() {
      if (this.treeData && this.treeData.isleaf === '1') {
        this.$refs.chil.query()
      }
    },
    exportTemplate() {
      if (this.treeData && this.treeData.isleaf === '1') {
        this.$refs.chil.exportTemplate()
      }
    },
    importFile() {
      if (this.treeData && this.treeData.isleaf === '1') {
        this.$refs.chil.importFile()
      }
    },
    // 新增
    handleAdd() {
      if (this.treeData && this.treeData.isleaf === '1') {
        this.$refs.chil.handleAdd()
      }
    },
    // 生效
    submitVerify() {
      if (this.treeData && this.treeData.isleaf === '1') {
        this.verifyLoading = true
        this.$refs.chil.submitVerify()
      }
    },
    // 生效回调
    verifyCallback() {
      this.verifyLoading = !this.verifyLoading
    },
    // 撤销生效
    revokeVerify() {
      if (this.treeData && this.treeData.isleaf === '1') {
        this.revokeVerifyLoading = true
        this.$refs.chil.revokeVerify()
      }
    },
    // 撤销生效回调
    revokeVerifyCallback() {
      this.revokeVerifyLoading = !this.revokeVerifyLoading
    },
    // 调出
    handleOut() {
      if (this.treeData && this.treeData.isleaf === '1') {
        this.$refs.chil.handleOut()
      }
    },
    // 调入
    handleIn() {
      if (this.treeData && this.treeData.isleaf === '1') {
        this.inLoading = true
        this.$refs.chil.handleIn()
      }
    },
    // 调入回调
    handleInCallback() {
      this.inLoading = false
    },
    // 消减
    handleReduction() {
      if (this.treeData && this.treeData.isleaf === '1') {
        this.$refs.chil.handleReduction()
      }
    },
    // 修改
    handleEdit() {
      if (this.treeData && this.treeData.isleaf === '1') {
        this.$refs.chil.handleEdit()
      }
    },
    // 删除
    handleDelete() {
      if (this.treeData && this.treeData.isleaf === '1') {
        this.deleteLoading = true
        this.$refs.chil.handleDelete()
      }
    },
    // 删除回调
    handleDeleteCallback() {
      this.deleteLoading = !this.deleteLoading
    },
    // 打开附件
    appendixOpen() {
      if (this.treeData && this.treeData.isleaf === '1') {
        this.$refs.chil.appendixOpen()
      }
    },
    // 导出
    outPutFile() {
      if (this.treeData && this.treeData.isleaf === '1') {
        this.$refs.chil.outPutFile()
      }
    },
    // 工资编报状态提示
    salaryStateCallback() {
      this.$message({
        showClose: true,
        message: '工资编报已送审，不能操作',
        type: 'warning',
        duration: 8000
      })
    },
    toggerTree() {
      this.treeShow = !this.treeShow
      this.isActive = !this.isActive
      this.Show = !this.Show
    },
    handleTreeQuery(data) {
      if (data && data.isleaf === '1') {
        this.treeData = data
      }
    },
    dragController() {
      this.$refs.icon.dragControllerDiv()
    }
  }
}
</script>
<style  lang="scss" scoped>
@import "~@/styles/border.scss";
/*引入公共样式*/

.app-title {
  margin-bottom: 15px;
  height: 20px;
  border-bottom: 1px solid #dcdfe6;
}
</style>
